<template>
	<div>  
		<!-- 导航部分开始 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>主数据</el-breadcrumb-item>
			<el-breadcrumb-item>物料产品管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 导航部分结束 -->
		<el-row>
			<el-col :span="3">
				<el-input style="width: 80%; margin-top: 15px;" placeholder="请输入分类名称" clearable />
				<!-- 物料产品分类树形控件 -->
				<el-tree ref="itemTypeTree" :data="itemTypes" :props="defaultProps" 
				 node-key="itemTypeName" @node-click="selectByItemType"
					default-expand-all :expand-on-click-node="false" />
				<!-- 物料产品分类树形控件 -->
			</el-col>
			<el-col :span="21">
				<!--  搜索栏开始 -->
				<el-form style="margin-top: 15px;" :inline="true" :model="queryItem" class="demo-form-inline">

					<el-form-item label="物料编码">
						<el-input v-model="queryItem.itemCode" placeholder="请输入物料编码" clearable />
					</el-form-item>
					<el-form-item label="物料名称">
						<el-input v-model="queryItem.itemName" placeholder="请输入物料名称" clearable />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="loadItems">搜索</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="reLoad">重置</el-button>
					</el-form-item>
				</el-form>
				<!--  搜索栏结束 -->
				<!-- 工具栏开始 -->
				<div>
					<el-button title="新增物料" @click="this.addItemDialogVisible = true" type="primary"><el-icon>
							<Plus />
						</el-icon></el-button>
					<el-button @click="handlerEditItems" title="编辑选中物料" type="primary"><el-icon>
							<EditPen />
						</el-icon></el-button>
					<el-button @click="handlerDeleteItems" title="删除选中物料" type="primary"><el-icon>
							<Delete />
						</el-icon></el-button>
				</div>
				<!-- 工具栏结束 -->
				<!-- 表格 开始 -->
				<el-table ref="itemTable" :data="items" max-height="800px" stripe="true" border="true"
					style="width: 100%;margin-top: 10px;">
					<el-table-column align="center" type="selection" width="55" />
					<el-table-column align="center" label="物料编码" property="dictType">
						<template #default="scope">
							<el-link type="success" @click="showItemData(scope.row)">
								{{ scope.row.itemCode }}
							</el-link>
						</template>
					</el-table-column>
					<el-table-column align="center" label="物料名称" property="itemName" />
					<el-table-column align="center" label="规格型号" property="specification" />
					<el-table-column align="center" label="单位" property="measureName" />
					<el-table-column align="center" label="物料/产品" property="itemOrProduct" />
					<el-table-column align="center" label="所属分类" property="itemTypeName" />
					<el-table-column align="center" label="是否启用" property="enableFlag">
						<template #default="scope">
							<!-- scope.row 就是整行数据-->
							<el-tag v-if="scope.row.enableFlag == 'Y'" class="ml-2" type="success">是</el-tag>
							<el-tag v-else class="ml-2" type="danger">否</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" label="设置安全库存" property="safeStockFlag">
						<template #default="scope">
							<!-- scope.row 就是整行数据-->
							<el-tag v-if="scope.row.safeStockFlag == 'Y'" class="ml-2" type="success">是</el-tag>
							<el-tag v-else class="ml-2" type="danger">否</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" label="创建时间" :formatter="timeFormatter"
						property="createTimeMillis" />
					<el-table-column width="200" align="center" label="操作">
						<template #default="scope">
							<el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
							<el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
								@confirm="handleDelete(scope.row)" title="您是否要删除这行数据">
								<template #reference>
									<el-button size="small" type="danger">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<!-- 表格 结束 -->
				<!-- 分页栏开始 -->
				<el-pagination style="margin-top: 15px;" :page-size="itemLimit" :pager-count="itemMaxPage"
					@current-change="changePage" background layout="prev, pager, next" :total="itemTotal" />
				<!-- 分页栏结束 -->


				<!-- 添加物料的弹窗窗体开始-->
				<el-dialog v-model="addItemDialogVisible" title="添加物料" width="900" align-center>
					<!-- 添加用户的表单 -->
					<el-form label-width="100px" :model="newItem" style="max-width: 100%">
						<el-row>
							<el-col :span="7">
								<el-form-item label="物料编码">
									<el-input v-model="newItem.itemCode" />
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-switch @change="autoGenWorkOrderId" v-model="autoWorkOrderId" class="ml-2" style="--el-switch-on-color: #13ce66;
								--el-switch-off-color: #ff4949" />自动生成
							</el-col>
							<el-col :span="13">
								<el-form-item label="物料名称">
									<el-input v-model="newItem.itemName" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="规格型号">
							<el-input type="textarea" :rows="3" v-model="newItem.specification" />
						</el-form-item>
						<el-row :gutter="5">
							<el-col :span="12">
								<el-form-item label="单位">
									<el-select v-model="newItem.measureId" class="m-2" placeholder="请选择单位"
										>
										<el-option v-for="item in measures" :key="item.measureId"
											:label="item.measureName" :value="item.measureId" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="物料/产品分类">
									<el-tree-select v-model="newItem.itemTypeId" :data="itemTypes"
										:props="defaultSelectProps" :render-after-expand="false" :clearable="true"
										placeholder="请选择所属分类">
									</el-tree-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="5">
							<el-col :span="12">
								<el-form-item label="是否启用">
									<el-radio-group v-model="newItem.enableFlag" class="ml-4">
										<el-radio label="N" size="large">否</el-radio>
										<el-radio label="Y" size="large">是</el-radio>
									</el-radio-group>
								</el-form-item>								
							</el-col>
							<el-col :span="12">
								<el-form-item label="安全库存">
									<el-radio-group v-model="newItem.safeStockFlag" class="ml-4">
										<el-radio label="N" size="large">否</el-radio>
										<el-radio label="Y" size="large">是</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="备注">
							<el-input type="textarea" :rows="3" v-model="newItem.remark" placeholder="请输入内容" />
						</el-form-item>
					</el-form>	
					<template #footer>
						<span class="dialog-footer">
							<el-button @click="cancelAddItem">取消</el-button>
							<el-button type="primary" @click="doAddItem">
								提交
							</el-button>
						</span>
					</template>
				</el-dialog>
				<!-- 添加物料的弹窗窗体结束-->

				<!-- 修改物料的弹窗窗体开始-->
				<el-dialog v-model="itemEditDrawer" title="修改物料" width="900" align-center>
					<!-- 添加用户的表单 -->
					<el-form label-width="100px" :model="editItem" style="max-width: 100%">
						<el-row>
							<el-col :span="7">
								<el-form-item label="物料编码">
									<el-input v-model="editItem.itemCode" />
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-switch @change="autoGenWorkOrderIdEdit" v-model="autoWorkOrderId" class="ml-2" style="--el-switch-on-color: #13ce66;
								--el-switch-off-color: #ff4949" />自动生成
							</el-col>
							<el-col :span="13">
								<el-form-item label="物料名称">
									<el-input v-model="editItem.itemName" />
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="规格型号">
							<el-input type="textarea" :rows="3" v-model="editItem.specification" />
						</el-form-item>
						<el-row :gutter="5">
							<el-col :span="12">
								<el-form-item label="单位">
									<el-select v-model="editItem.measureId" class="m-2" placeholder="请选择单位"
										>
										<el-option v-for="item in measures" :key="item.measureId"
											:label="item.measureName" :value="item.measureId" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="物料/产品分类">
									<el-tree-select v-model="editItem.itemTypeId" :data="itemTypes"
										:props="defaultSelectProps" :render-after-expand="false" :clearable="true"
										placeholder="请选择所属分类">
									</el-tree-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="5">
							<el-col :span="12">
								<el-form-item label="是否启用">
									<el-radio-group v-model="editItem.enableFlag" class="ml-4">
										<el-radio label="N" size="large">否</el-radio>
										<el-radio label="Y" size="large">是</el-radio>
									</el-radio-group>
								</el-form-item>								
							</el-col>
							<el-col :span="12">
								<el-form-item label="安全库存">
									<el-radio-group v-model="editItem.safeStockFlag" class="ml-4">
										<el-radio label="N" size="large">否</el-radio>
										<el-radio label="Y" size="large">是</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="备注">
							<el-input type="textarea" :rows="3" v-model="editItem.remark" placeholder="请输入内容" />
						</el-form-item>
					</el-form>
					 <el-tabs type="border-card">
					    <el-tab-pane label="BOM组成">
							<div>
								<el-button title="新增物料" @click="this.addBOMDialogVisible = true" type="primary"><el-icon>
										<Plus />
									</el-icon></el-button>
								<el-button @click="handlerDeleteBOMs" title="删除选中BOM" type="danger"><el-icon>
										<Delete />
									</el-icon></el-button>
							</div>
							<!-- BOM表格 开始 -->
							<el-table ref="BOMTable" :data="BOMs" max-height="800px" stripe="true" border="true"
								style="width: 100%;margin-top: 10px;">
								<el-table-column align="center" type="selection" width="55" />
								<el-table-column align="center" label="物料编码" property="itemCode" />
								<el-table-column align="center" label="物料名称" property="itemName" />
								<el-table-column align="center" label="规格" property="specification" />
								<el-table-column align="center" label="单位" property="measureName" />
								<el-table-column align="center" label="使用比例" property="itemOrProduct" />
								<el-table-column align="center" label="备注" property="itemTypeName" />									
								<el-table-column width="100" align="center" label="操作">
									<template #default="scope">
										<el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
										<el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
											@confirm="handleDelete(scope.row)" title="您是否要删除这行数据">
											<template #reference>
												<el-button size="small" type="danger">删除</el-button>
											</template>
										</el-popconfirm>
									</template>
								</el-table-column>
							</el-table>
							<!-- 表格 结束 -->
						</el-tab-pane>
					    <el-tab-pane label="供应商">Config</el-tab-pane>
					    <el-tab-pane label="替代品">Role</el-tab-pane>
					    <el-tab-pane label="SIP">Task</el-tab-pane>
					    <el-tab-pane label="SOP">Task</el-tab-pane>
					  </el-tabs>
					<template #footer>
						<span class="dialog-footer">
							<el-button @click="cancelEditItem">取消</el-button>
							<el-button type="primary" @click="doEditItem">
								提交
							</el-button>
						</span>
					</template>
				</el-dialog>
				<!-- 修改物料的弹窗窗体结束-->
				<!-- 新增BOM弹窗开始 -->
				<el-dialog  title="物料产品选择" v-model="addBOMDialogVisible" width="1400px" align-center>
					<el-row>
							<el-col :span="3">
								<el-input style="width: 80%; margin-top: 15px;" placeholder="请输入分类名称" clearable />
								<!-- 物料产品分类树形控件 -->
								<el-tree ref="itemTypeTree" :data="itemTypes" :props="defaultProps" @node-click="selectByItemType"
									default-expand-all :expand-on-click-node="false" />
								<!-- 物料产品分类树形控件 -->
							</el-col>
							<el-col :span="21">
								<!--  搜索栏开始 -->
								<el-form style="margin-top: 15px;" :inline="true" :model="queryItem" class="demo-form-inline">
					
									<el-form-item label="物料编码">
										<el-input v-model="queryItem.itemCode" placeholder="请输入物料编码" clearable />
									</el-form-item>
									<el-form-item label="物料名称">
										<el-input v-model="queryItem.itemName" placeholder="请输入物料名称" clearable />
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="loadItems">搜索</el-button>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="reLoad">重置</el-button>
									</el-form-item>
								</el-form>
								<!--  搜索栏结束 -->								
								<!-- 表格 开始 -->
								<el-table ref="itemTable" :data="items" max-height="800px" stripe="true" border="true"
									style="width: 100%;margin-top: 10px;">
									<el-table-column align="center" type="selection" width="55" />
									<el-table-column align="center" label="物料编码" property="dictType">
										<template #default="scope">
											<el-link type="success" @click="showItemData(scope.row)">
												{{ scope.row.itemCode }}
											</el-link>
										</template>
									</el-table-column>
									<el-table-column align="center" label="物料名称" property="itemName" />
									<el-table-column align="center" label="规格型号" property="specification" />
									<el-table-column align="center" label="单位" property="measureName" />
									<el-table-column align="center" label="物料/产品" property="itemOrProduct" />
									<el-table-column align="center" label="所属分类" property="itemTypeName" />									
									<el-table-column align="center" label="创建时间" :formatter="timeFormatter"
										property="createTimeMillis" />									
								</el-table>
								<!-- 表格 结束 -->
								<!-- 分页栏开始 -->
								<el-pagination style="margin-top: 15px;" :page-size="itemLimit" :pager-count="itemMaxPage"
									@current-change="changePage" background layout="prev, pager, next" :total="itemTotal" />
								<!-- 分页栏结束 -->
								</el-col>
								</el-row>
								<template #footer >
									<span >									
										<el-button type="primary" @click="doAddBOM">确定</el-button>
										<el-button @click="cancelAddBOM">取消</el-button>
									</span>
								</template>
				</el-dialog>
				
				<!-- 新增BOM弹窗结束 -->

			</el-col>
		</el-row>
	</div>
</template>
<script>
	import itemRequest from '../../../api/mdItem-api.js';
	import tools from '../../../util/tools.js';
	import dictDatRequest from '../../../api/dict-data-api.js';
	import measureRequest from '../../../api/mdUnitMeasure-api.js';
	import itemTypeRequest from '../../../api/mdItemType-api.js';

	export default {
		data() {
			return {
				queryItem: {}, // 分装查询字典条件的字典对象
				items: [], // 字典数据列表
				itemCurrPage: 1, // 字典分页的当前页码
				itemLimit: 10, // 字典分页的每页大小
				itemTotal: 0, // 字典列表的总条数
				itemMaxPage: 1, // 字典列表的最大页码

				// 新增物料相关属性
				addItemDialogVisible: false, // 新增字典的弹窗标志
				newItem: {}, // 封装新增的字典信息
				currItem: {}, // 保存正在操作的字典信息
				prodWorkOrder: true,
				autoWorkOrderId: false,
				measures: [],
				item: "item",
				product: "product",

				//编辑物料相关属性
				itemEditDrawer: false,
				editItem: {},

				//物料分类树属性
				itemTypes: [],
				defaultProps: {
					children: 'children',
					label: 'itemTypeName',
				},
				
				//物料/产品下拉框分类树属性
				defaultSelectProps: {
					value: 'itemTypeId',
					children: 'children',
					label: 'itemTypeName',
				},
				
				addBOMDialogVisible: false,
				


				// 物料编码数据管理相关属性
				itemCodeDataAttr: {
					itemCodeManagerDialogVisible: false, //物料编码数据管理的弹窗标志 
					additemCodeDataDialogVisible: false, // 新增物料编码数据的弹窗标志
					itemDatas: [], // 字典数据列表
					newData: {}, // 封装新增字典数据对象
				}
			}
		},
		methods: {
			/**
			 * 行编辑事件取消
			 */
			cancelEditItem(){
				this.editItem = {};
				this.itemEditDrawer = false;
			},
			/**
			 * 行编辑事件确认
			 */
			doEditItem(){
            // console.log("开始编辑")
            // 提交editUser即可
            itemRequest.edit(this.editItem, res => {
                console.log("*******")
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改物料成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.itemEditDrawer = false;
                    // 重新加载数据
                    this.loadItems();
                    // 将editUser制空
                    this.editItem = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '物料重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
			/**
			 * 物料分类树点击事件
			 */
			selectByItemType(data){
				// console.log(data);
				this.queryItem = data;
				console.log(this.queryItem);
				this.loadItems();
				this.queryItem = {};
			},
			/**
			 * 确定添加BOM
			 */
			doAddBOM(){
					let table = this.$refs.itemTable;
					let selectionRows = table.getSelectionRows();
					if (selectionRows == undefined || selectionRows.length == 0) {
						this.$message({
							message: "您没有选中任何行",
							type: "info"
						});
					} else {
						let itemIds = [];
						selectionRows.forEach(item => {
							itemIds.push(item.itemId);
						});
						itemRequest.deletes(itemIds, res => {
							this.$message({
								type: "success",
								message: "您成功删除了" + res.msg + "个物料"
							});
							this.loadItems();
						});
					}
				
			},
			/**
			 * 取消添加BOM
			 */
			cancelAddBOM(){
				
			},
			/**
			 * 加载物料分类树
			 */
			loadItemTypes() {
				if (this.itemTypes != undefined || this.itemTypes.length != 0) {
					itemTypeRequest.getAllItemTypes(res => {
						this.itemTypes = res.data;
					})
				}
			},
			/**
			 * 重置物料表单
			 */
			reLoad() {
				this.queryItem = {};
				this.loadItems();
			},
			/**
			 * 获取所有的单位
			 */
			getAllMeasures() {
				measureRequest.getAllMeasure(res => {
					this.measures = res.data;
				});
			},
			/**
			 * 自动生成物料编码的方法
			 * @param {*} val 
			 */
			autoGenWorkOrderId(val) {
				if (val) {
					itemRequest.genWorkOrderId(res => {
						this.newItem.itemCode = res.data;
					});
				}
			},
			/**
			 * 修改物料弹窗自动生成物料编码
			 * @param {Object} val
			 */
			autoGenWorkOrderIdEdit(val) {
				if (val) {
					itemRequest.genWorkOrderId(res => {
						this.editItem.itemCode = res.data;
					});
				}
			},
			/**
			 * 新增字典数据事件
			 */
			doAddData() {
				// 将记录的字典编号保存到字典数据中
				this.dictDataAttr.newData.dictId = this.currDict.dictId;
				console.log(this.dictDataAttr.newData);
				this.dictDataAttr.addDictDataDialogVisible = false;
			},
			/**
			 * 取消字典数据新增操作
			 */
			cancelAddData() {
				this.dictDataAttr.addDictDataDialogVisible = false;
				this.dictDataAttr.newData = {};
			},
			/**
			 * 新增字典的提交按钮事件
			 */
			doAddItem() {
				// 数据校验：略
				// 提交数据
				itemRequest.save(this.newItem, res => {

					if (res.code == 200) {
						this.$message({
							type: "success",
							message: "保存成功"
						});
						// 关闭窗体
						this.cancelAddItem();
						// 重新加载数据
						this.loadItems(); // 加载当前页
					} else if (res.code == 300) {
						this.$message({
							type: "warning",
							message: res.msg
						});
					} else {
						this.$message({
							type: "error",
							message: "保存失败"
						});
					}
				});
			},
			/**
			 * 取消新增字典的按钮事件
			 */
			cancelAddItem() {
				// 关闭窗体
				this.addItemDialogVisible = false;
				// 清空newDict
				this.newItem = {};
			},
			/**
			 * 行删除事件
			 * @param {} row 
			 */
			handleDelete(row) {
				itemRequest.delete(row.itemId, res => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						this.loadItems();
					} else {
						this.$message({
							type: 'error',
							message: '删除失败'
						})
					}
				});
			},
			/**
			 * 行编辑事件
			 * @param {*} row 
			 */
			handleEdit(row) {
				itemRequest.selectById(row.itemId, res => {
					this.itemEditDrawer = true;
					this.editItem = res.data;
				})
			},
			/**
			 * 时间毫秒数转换为对应的字符串
			 * @param {*} time 
			 */
			timeFormatter(row, column, time) {
				return tools.timeMillisToString(time);
			},
			/**
			 * 工具栏-选中删除按钮事件
			 */
			handlerDeleteItems() {
				let table = this.$refs.itemTable;
				let selectionRows = table.getSelectionRows();
				if (selectionRows == undefined || selectionRows.length == 0) {
					this.$message({
						message: "您没有选中任何行",
						type: "info"
					});
				} else {
					let itemIds = [];
					selectionRows.forEach(item => {
						itemIds.push(item.itemId);
					});
					itemRequest.deletes(itemIds, res => {
						this.$message({
							type: "success",
							message: "您成功删除了" + res.msg + "个物料"
						});
						this.loadItems();
					});
				}
			},
			/**
			 * 工具栏-选中编辑按钮事件
			 */
			handlerEditItems() {

			},
			/**
			 * 字典列表的翻页函数
			 * @param {} value  最新页码
			 */
			changePage(value) {
				this.itemCurrPage = value;
				this.loadItems();
			},
			/**
			 * 加载字典数据
			 */
			loadItems() {
				itemRequest.list(this.itemCurrPage, this.itemLimit, this.queryItem, res => {
					// 设置数据
					console.log(112233);
					console.log(res.data.list);
					this.items = res.data.list;
					this.itemTotal = res.data.total;
					this.itemMaxPage = res.data.pages;
				});
			}
		},
		mounted() {
			// 默认加载字典数据列表
			this.loadItems();
			this.getAllMeasures();
			this.loadItemTypes();
		}
	}
</script>